<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
  <meta charset="utf-8">
  <title>流程配置</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
  <link rel="stylesheet" th:href="@{/adminui/dist/css/admin.css}" media="all">
  <link rel="stylesheet" th:href="@{/style/custom.css}" media="all">

  <style>
    html {
        background-color: #FFFFFF !important;
        color: #5f5f5f;
    }
  </style>
</head>
<body>

<div class="layui-tab">
  <input type="hidden" id="processInstId" name="processInstId" th:value="${processInstId}">
  <ul class="layui-tab-title">
    <li class="layui-this">配置信息</li>
    <li>流程信息</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      <div class="layui-card">
        <input type="hidden" id="procDefId" name="procDefId" th:value="${processDefId}">
        <!--table 定义-->
        <div class="layui-card-body">
          <div class="layui-btn-group" style="padding-bottom: 10px;">
            <!--刷新table-->
            <button type="button" class="layui-btn layui-btn-normal btn-op-candidate layui-btn-sm" data-type="refresh">
              <i class="layui-icon">&#xe666;</i>刷新
            </button>
            <!-- 新增 -->
            <button sec:authorize="hasAuthority('flow:def:add')" type="button" class="layui-btn layui-btn-normal btn-op-candidate layui-btn-sm" data-type="add">
              <i class="layui-icon">&#xe654;</i>新增
            </button>
          </div>

          <!--table 定义-->
          <table id="LAY-task-candidate-table" lay-filter="LAY-task-candidate-table"></table>

          <!--列表操作项-->
          <script type="text/html" id="candidate-table">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del"> <i class="layui-icon layui-icon-delete"></i></a>
          </script>
        </div>

        <div class="layui-card-body">
          <div class="layui-btn-group" style="padding-bottom: 10px;">
            <!--刷新table-->
            <button type="button" class="layui-btn layui-btn-normal btn-op-attribute layui-btn-sm" data-type="refresh">
              <i class="layui-icon">&#xe666;</i>刷新
            </button>
            <!-- 新增 -->
            <button sec:authorize="hasAuthority('flow:def:add')" type="button" class="layui-btn layui-btn-normal btn-op-attribute layui-btn-sm" data-type="add">
              <i class="layui-icon">&#xe654;</i>新增
            </button>
          </div>

          <!--table 定义-->
          <table id="LAY-proc-attribute-table" lay-filter="LAY-proc-attribute-table"></table>

          <!--列表操作项-->
          <script type="text/html" id="attribute-table">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></a>
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del"> <i class="layui-icon layui-icon-delete"></i></a>
          </script>
        </div>
      </div>
    </div>
    <div class="layui-tab-item">
      <img id="defImg" src="" />
    </div>
  </div>
</div>

<script th:inline="javascript">
  let allUserTask = [[${allUserTask}]];
  let users = [[${users}]];
  let positions = [[${positions}]];
  let roles = [[${roles}]];
</script>
<script th:src="@{/layui/layui.js}"></script>
<script>
  layui.config({
    base: '/'
  }).extend({
    flying: 'flying'
  }).use(['index', 'flying'], function(){
    const $ = layui.$
        ,admin = layui.admin
        ,form = layui.form
        ,table = layui.table
        ,layer = layui.layer
        ,upload = layui.upload
        ,flying = layui.flying;

    flying.table({
      elem: '#LAY-task-candidate-table',
      url: '/flow/definition/task/candidate/page', //数据接口
      where: {
        procDefId: layui.$("#procDefId").val()
      },
      cols: [
        {type: 'numbers', fixed: 'left', title: '序号'}
        , {field: 'nodeName', title: '任务名称', width: 190}
        , {field: 'nodeId', title: '任务ID', minWidth: 140, hide: true}
        , {field: 'candidateUser', title: '候选人', minWidth: 150, templet: function (d) {
            if (d.candidateUser) {
              let arr = d.candidateUser.split(',');
              let objs = new Array();
              for (let i = 0; i < arr.length; i++) {
                objs.push(users.find(obj => obj.value === arr[i]).name);
              }
              return objs.length === 0 ? '未知' : objs.join(',');
            } else {
              return '';
            }
          }}
        , {field: 'candidatePost', title: '候选岗位', minWidth: 150, templet: function (d) {
            if (d.candidatePost) {
              let arr = d.candidatePost.split(',');
              let objs = new Array();
              for (let i = 0; i < arr.length; i++) {
                objs.push(positions.find(obj => obj.value === arr[i]).name);
              }
              return objs.length === 0 ? '未知' : objs.join(',');
            } else {
              return '';
            }
          }}
        , {field: 'candidateRole', title: '候选角色', minWidth: 150, templet: function (d) {
            if (d.candidateRole) {
              let arr = d.candidateRole.split(',');
              let objs = new Array();
              for (let i = 0; i < arr.length; i++) {
                objs.push(roles.find(obj => obj.value === arr[i]).name);
              }
              return objs.length === 0 ? '未知' : objs.join(',');
            } else {
              return '';
            }
          }}
        , {title: '操作', width: 100, align: 'center', fixed: 'right', toolbar: '#candidate-table'}
      ]
    });

    //事件
    let active1 = {
      add: function () {
        layer.open({
          type: 2
          , title: '新增'
          , content: '/flow/definition/turn/candidate/edit?processDefId=' + $('#procDefId').val()
          // ,maxmin: true
          , resize: false
          , area: ['500px', '540px']
          , btn: ['确定', '取消']
          , yes: function (index, layero) {
            let iframeWindow = window['layui-layer-iframe' + index]
                , submitID = 'LAY-candidate-front-submit'
                , submit = layero.find('iframe').contents().find('#' + submitID);

            //监听提交
            iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
              let field = data.field;

              admin.req({
                url: '/flow/definition/candidate/save',
                type: 'post',
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                data: JSON.stringify(field),
                done: function (res) {
                  //执行成功
                  layer.msg(res.msg, {icon: 1});
                  table.reload('LAY-task-candidate-table'); //数据刷新
                  layer.close(index); //关闭弹层
                }
              });
            });

            submit.trigger('click');
          }
        });
      }
      , refresh: function () {
        //执行重载 数据刷新
        table.reload('LAY-task-candidate-table');
      }
    };

    //执行事件操作
    layui.$('.layui-btn.btn-op-candidate').on('click', function () {
      let type = layui.$(this).data('type');
      active1[type] ? active1[type].call(this) : '';
    });

    table.on('tool(LAY-task-candidate-table)', function (obj) {
      let line_data = obj.data;
      if (obj.event === 'del') {
        layer.confirm('真的删除行么？', function (index) {
          //提交 Ajax 成功后，更新表格中的数据
          admin.req({
            url: '/flow/definition/candidate/delete?id=' + line_data.id
            , type: 'post'
            , done: function (res) {
              //执行成功
              layer.msg(res.msg, {icon: 1});
              table.reload('LAY-task-candidate-table');  //数据刷新
              layer.close(index); //关闭弹层
            }
          });
        });
      } else if (obj.event === 'edit') {
        // let tr = $(obj.tr);
        layer.open({
          type: 2
          , title: '修改'
          , content: '/flow/definition/turn/candidate/edit?processDefId=' + $('#procDefId').val() + '&id=' + line_data.id
          // ,maxmin: true
          , resize: false
          , area: ['500px', '540px']
          , btn: ['确定', '取消']
          , yes: function (index, layero) {
            let iframeWindow = window['layui-layer-iframe' + index]
                , submitID = 'LAY-candidate-front-submit'
                , submit = layero.find('iframe').contents().find('#' + submitID);

            //监听提交
            iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
              let field = data.field;

              admin.req({
                url: '/flow/definition/candidate/save',
                type: 'post',
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                data: JSON.stringify(field),
                done: function (res) {
                  //执行成功
                  layer.msg(res.msg, {icon: 1});
                  table.reload('LAY-task-candidate-table'); //数据刷新
                  layer.close(index); //关闭弹层
                }
              });
            });

            submit.trigger('click');
          }
        });
      }
    });

    flying.table({
      elem: '#LAY-proc-attribute-table',
      url: '/flow/definition/proc/attribute/page', //数据接口
      where: {
        procDefId: layui.$("#procDefId").val()
      },
      cols: [
        {type: 'numbers', fixed: 'left', title: '序号'}
        , {field: 'eventType', title: '通知类型', width: 120, templet: function(d){
            if(d.eventType === 'start'){
              return '开始通知';
            } else if(d.eventType === 'end') {
              return '结束通知';
            } else {
              return '';
            }
          }, unresize: true}
        , {field: 'nodeId', title: '节点名称', width: 190, templet: function (d) {
            if (d.nodeId) {
              return allUserTask[d.nodeId] || '未知';
            } else {
              return '';
            }
          }}
        , {field: 'attrName', title: '属性名', width: 190}
        , {field: 'attrValue', title: '属性值', minWidth: 150}
        , {field: 'remark', title: '备注', minWidth: 150}
        , {title: '操作', width: 100, align: 'center', fixed: 'right', toolbar: '#attribute-table'}
      ]
    });

    //事件
    let active2 = {
      add: function () {
        layer.open({
          type: 2
          , title: '新增'
          , content: '/flow/definition/turn/attribute/edit?processDefId=' + $('#procDefId').val()
          // ,maxmin: true
          , resize: false
          , area: ['500px', '540px']
          , btn: ['确定', '取消']
          , yes: function (index, layero) {
            let iframeWindow = window['layui-layer-iframe' + index]
                , submitID = 'LAY-attribute-front-submit'
                , submit = layero.find('iframe').contents().find('#' + submitID);

            //监听提交
            iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
              let field = data.field;

              admin.req({
                url: '/flow/definition/attribute/save',
                type: 'post',
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                data: JSON.stringify(field),
                done: function (res) {
                  //执行成功
                  layer.msg(res.msg, {icon: 1});
                  table.reload('LAY-proc-attribute-table'); //数据刷新
                  layer.close(index); //关闭弹层
                }
              });
            });

            submit.trigger('click');
          }
        });
      }
      , refresh: function () {
        table.reload('LAY-proc-attribute-table');
      }
    };

    //执行事件操作
    layui.$('.layui-btn.btn-op-attribute').on('click', function () {
      let type = layui.$(this).data('type');
      active2[type] ? active2[type].call(this) : '';
    });

    table.on('tool(LAY-proc-attribute-table)', function (obj) {
      let line_data = obj.data;
      if (obj.event === 'del') {
        layer.confirm('真的删除行么？', function (index) {
          //提交 Ajax 成功后，更新表格中的数据
          admin.req({
            url: '/flow/definition/attribute/delete?id=' + line_data.id
            , type: 'post'
            , done: function (res) {
              //执行成功
              layer.msg(res.msg, {icon: 1});
              table.reload('LAY-proc-attribute-table');  //数据刷新
              layer.close(index); //关闭弹层
            }
          });
        });
      } else if (obj.event === 'edit') {
        // let tr = $(obj.tr);
        layer.open({
          type: 2
          , title: '修改'
          , content: '/flow/definition/turn/attribute/edit?processDefId=' + $('#procDefId').val() + '&id=' + line_data.id
          // ,maxmin: true
          , resize: false
          , area: ['500px', '540px']
          , btn: ['确定', '取消']
          , yes: function (index, layero) {
            let iframeWindow = window['layui-layer-iframe' + index]
                , submitID = 'LAY-attribute-front-submit'
                , submit = layero.find('iframe').contents().find('#' + submitID);

            //监听提交
            iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
              let field = data.field;

              admin.req({
                url: '/flow/definition/attribute/save',
                type: 'post',
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                data: JSON.stringify(field),
                done: function (res) {
                  //执行成功
                  layer.msg(res.msg, {icon: 1});
                  table.reload('LAY-proc-attribute-table'); //数据刷新
                  layer.close(index); //关闭弹层
                }
              });
            });

            submit.trigger('click');
          }
        });
      }
    });

    let windowUrl = window.URL || window.webkitURL;//处理浏览器兼容性
    let xhr = new XMLHttpRequest();
    xhr.open("GET", '/flow/definition/process/diagram?processDefId=' + layui.$("#procDefId").val(), true);
    xhr.responseType = "blob";
    xhr.onload = function () {
      if (this.status == 200) {
        let blob = this.response;
        let imgUrl = windowUrl.createObjectURL(blob);
        document.getElementById('defImg').src = imgUrl;
        // URL.revokeObjectURL(imgUrl);
      }
    }
    xhr.send();
  });
</script>
</body>
</html>